<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Achievements
      <ng-container *ngIf="(gameService.achievements$ | async) as achievements">({{ achievements?.length }})</ng-container>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ng-container *ngIf="(gameService.achievements$ | async) as achievements">
    <div class="blank-slate" *ngIf="!achievements?.length">
      You have no achievements.
    </div>
    
    <ion-row class="ion-flex-wrap">
      <ion-col size-xs="12" size-md="6" *ngFor="let ach of achievements">
        <ion-card>
          <ion-card-header>
            <ion-card-subtitle>Achieved {{ ach.achievedAt | date:'medium' }}</ion-card-subtitle>
            <ion-card-title>{{ ach.name }} (t{{ ach.tier }})</ion-card-title>

            <ion-icon class="title-img" [src]="'assets/icon/symbol-' + ach.type + '.svg'"></ion-icon>
          </ion-card-header>

          <ion-card-content>
            <ion-row class="ach-row">
              <ion-col>
                {{ ach.desc }}
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ng-container>
</ion-content>
